// 用户退出
document.querySelector('#username').innerHTML = localStorage.getItem('user-name')

document.querySelector('#logout').addEventListener('click', function () {
  localStorage.removeItem('user-name')
  localStorage.removeItem('user-token')

  location.href = './login.html'
})



// 获取学员列表数据
let renderList = () => {
    // 发送请求，获取学员数据，并把数据渲染到列表里
    axios.get('/students').then(result => {
        // console.log(result.data)

        let str = ''
        result.data.data.forEach(item => {
            str += `
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.group}</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                    <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
                    <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
                </td>
            </tr>
            `
        })
        document.querySelector('tbody').innerHTML = str
    })
}
renderList()

// 删除操作
document.querySelector('tbody').addEventListener('click', function (e) {
    console.log(e.target.classList)

    if(e.target.classList.contains('bi-trash')) {
        // 说明点击了删除
        // console.log('你点击了删除')
        let id = e.target.dataset.id
        // console.log(id);
        axios.delete(`/students/${id}`).then(result => renderList())
        // console.log(result);  
    }
    // 判断，点击是是否是修改
if (e.target.classList.contains('bi-pen')) {
    // console.log('你点击了修改')
    // 获取这一条数据的信息，得到信息之后，把数据回填到表单中
    axios.get(`/students/${e.target.dataset.id}`).then(result => {
      let data = result.data.data
      console.log(data)
      modalBox.querySelector('.modal-title').innerHTML = '修改学员'
      modalBox.querySelector('.modal-title').setAttribute('data-id', data.id)

      // 处理省市县(省默认就是有的；只需要处理市和县)
      axios.get(`/api/city`, { params: { pname: data.province } }).then(result => {
        // console.log(result.data.data)
        let cities = result.data.data
        let str = '<option value="">--城市--</option>'
        cities.forEach(item => (str += `<option value="${item}">${item}</option>`))
        cs.innerHTML = str
  
        // 获取市之后，再获取县
        axios
          .get(`/api/area`, { params: { pname: data.province, cname: data.city } })
          .then(result => {
            // console.log(result.data.data)
            let areas = result.data.data
            let str = '<option value="">--地区--</option>'
            areas.forEach(item => (str += `<option value="${item}">${item}</option>`))
            as.innerHTML = str
            // 表示省、市、县都获取完毕了
            val(modalBox.querySelector('form'), data)
          })
      })
    })
    // 显示模态框
    modal.show()
  }

})


// 实例化模态框
let modalBox = document.querySelector('#modal')

let modal = new bootstrap.Modal(modalBox)
// 尝试让模态框显示
// modal.show()
// 初始化省市县
let ps= document.querySelector('[name=province]')
let cs =document.querySelector('[name=city]')
let as =document.querySelector('[name=area]')

let initCity = () => {
    // 完成省市县的联动效果
    // 1. 马上获取省
    axios.get('/api/province').then(result => {
        let provinces = result.data.data

        let str = '<option value="">--省--</option>'
        provinces.forEach(item => {
            str += `<option value="${item}">${item}</option>`
            ps.innerHTML = str
        })
    })
    // 2. 省切换的时候，获取市
    ps.addEventListener('change', function() {
        as.innerHTML = '<option value="">--县--</option>'
        axios.get('/api/city', { params: {pname: ps.value}}).then(result => {
          let cities = result.data.data
          let str = '<option value="">--市--</option>'
          cities.forEach(item => str += `<option value="${item}">${item}</option>`)
          cs.innerHTML = str
        })
      })
    // 3. 市切换的时候，获取县
    cs.addEventListener('change', function() {
        axios.get('/api/area', { params: {pname: ps.value,cname: cs.value}}).then(result => {
          let areas = result.data.data
          let str = '<option value="">--地区--</option>'
          areas.forEach(item => str += `<option value="${item}">${item}</option>`)
          as.innerHTML = str
        })
      })
}
initCity()
document.querySelector('#openModal').addEventListener('click', function() {
    modalBox.querySelector('.modal-title').innerHTML = '添加学员'
    modalBox.querySelector('form').reset()
    // 让模态框显示
    modal.show()
})

// ----------------------------- 点击确认，完成数据的提交 ---------------------------
document.querySelector('#submit').addEventListener('click', function () {
    // 获取表单各项的值（用户名、年龄、组号、省市县等等）
    // let data = val(表单) // 使用这个插件方法，必须为每个表单项设置name属性
    let data = val(document.querySelector('#form'))
    // 根据接口要求，要求下面5个字段，必须是number类型(数字类型)
    data.age = +data.age
    data.gender = +data.gender
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    data.group = +data.group
    let title = document.querySelector('h5.modal-title').innerHTML
    if (title === '添加学员') {
        // console.log(data)
    // Ajax提交数据
    axios.post('/students', data).then(result => {
        // console.log(result.data)
        // 添加成功，重新获取数据，重新渲染到页面
        renderList()
        // 隐藏模态框
        modal.hide()
      })
    } else if(title === '修改学员') {
        let id = document.querySelector('h5.modal-title').dataset.id

        axios.put(`/students/${id}`,data).then(result => {

            renderList()

            modal.hide()

        })
    }
    
  })